<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  
  <body>
    <div id="app">
      <button @click="count--">-</button>
      <h1 style="display: inline-block;padding: 0px 20px">{{count}}</h1>
      <button @click="count++">+</button>
    </div>
  </body>
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <script>
    const app = Vue.createApp({
      data() {
        return {
          count: 20
        };
      },
      beforeCreate() {
        console.log('beforeCreate', this.count); // undefined
      },
      created() { // 常用于发送请求获取数据
        console.log('created', this.count); // 20
      },
      beforeMount() {
        console.log('beforeMount', document.querySelector('h1')); // null
      },
      mounted() { // 常用于操作DOM
        console.log('mounted', document.querySelector('h1')); // <h1 style="display: inline-block;padding: 0px 20px">20</h1>
      },
      beforeUpdate() {
        console.log('beforeUpdate', this.count);
      },
      updated() {
        console.log('updated', this.count);
      },
      beforeUnmount() { // 常用于释放资源，例如定时器、监听器
        console.log('beforeUnmount', this);
      },
      unmounted() {
        console.log('unmounted', this);
      },
    }).mount('#app');
  </script>
</html>